<template>
    <div>
        <Modal v-model="modalShow" :closable='false' :mask-closable=false width="600">
            <p slot="header">广告修改</p>
            <Form ref="formData" :model="formData" :rules="rules" label-position="left" :label-width="100">
                <FormItem label="排序显示：" prop="weight">
                    <Input v-model="formData.weight" placeholder="请输入排序"></Input>
                </FormItem>
                <FormItem label="广告标题：" prop="name">
                    <Input v-model="formData.name" placeholder="请输入广告标题"></Input>
                </FormItem>
                <FormItem label="广告图片：" prop="cover_image">
                    <upload v-if='formdataFinished' :is-delete='false' v-model="formData.cover_image"
                            :upload-config="imguploadConfig" @on-upload-change='uploadChange'></upload>
                </FormItem>
                <FormItem label="广告时间：" prop="ad_at">
                    <DatePicker type="daterange"
                                placement="bottom-end"
                                placeholder="选择广告时间"
                                :value="formData.ad_at"
                                :options="ad_options"
                                @on-change="handleDateChange"
                                format="yyyy-MM-dd"
                                style="width: 100%;">
                    </DatePicker>
                </FormItem>
                <FormItem label="链接地址">
                    <Input v-model="formData.link_url" placeholder="请输入链接地址"></Input>
                </FormItem>
                <FormItem label="备注：">
                    <Input type="textarea" :row="3" v-model="formData.descriptions" placeholder="请输入备注"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancel">取消</Button>
                <Button type="primary" @click="editExcute" :loading='saveLoading'>保存</Button>
            </div>
            <div class="demo-spin-container" v-if='spinLoading === true'>
                <Spin fix>
                    <Icon type="load-c" size=18 class="spin-icon-load"></Icon>
                    <div>加载中...</div>
                </Spin>
            </div>
        </Modal>
    </div>
</template>
<script>
  import {edit, getInfoById} from '@/api/advertisement'

  import Upload from '_c/common/upload'

  export default {
    components: {
      Upload
    },
    props: {
      modalId: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        modalShow: true,
        saveLoading: false,
        spinLoading: true,
        formdataFinished: false,
        formData: {
          id: 0,
          weight: 20,
          name: '',
          cover_image: {
            attachment_id: 0,
            url: ''
          },
          ad_at: [],
          link_url: '',
          descriptions: ''
        },
        rules: {
          weight: [
            {required: true, type: 'number', message: '请填写排序数字', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请填写广告标题', trigger: 'blur'}
          ],
          ad_at: [
            {required: true, type: 'array', message: '请选择时间有效区间', trigger: 'blur'}
          ]
        },
        imguploadConfig: {
          headers: {
            'Authorization': window.access_token
          },
          format: ['jpg', 'jpeg', 'png', 'gif'],
          max_size: 800, // 800KB
          upload_url: window.uploadUrl.uploadAdvertisement,
          file_name: 'file',
          multiple: false,
          file_num: 1,
          default_list: [],
        },
        ad_options: {
          disabledDate (date) {
            return date && date.valueOf() < Date.now() - 86400000;
          }
        },
      }
    },
    mounted() {
      if (this.modalId > 0) {
        this.getInfoByIdExcute()
      }
    },
    methods: {
      getInfoByIdExcute() {
        let t = this;
        getInfoById(t.modalId).then(res => {
          let res_data = res.data
          t.formData = {
            id: res_data.id,
            name: res_data.name,
            ad_at: [res_data.start_at, res_data.end_at],
            link_url: res_data.link_url,
            descriptions: res_data.descriptions,
            cover_image: {
              attachment_id: res_data.cover_image.attachment_id,
              url: res_data.cover_image.url
            },
            weight: res_data.weight
          }
          t.imguploadConfig.default_list = [t.formData.cover_image]
          t.formdataFinished = true
          t.spinLoading = false
        })
      },
      editExcute() {
        let t = this
        t.$refs.formData.validate((valid) => {
          if (valid) {
            t.saveLoading = true
            edit(t.formData, t.modalId).then(res => {
              t.saveLoading = false
              t.modalShow = false
              t.$emit('on-edit-modal-success')
              t.$emit('on-edit-modal-hide')
              t.$Notice.success({
                title: res.message
              })
            }, function (error) {
              t.saveLoading = false;
            })
          }
        })
      },
      cancel() {
        this.modalShow = false
        this.$emit('on-edit-modal-hide')
      },
      uploadChange(fileList, formatFileList) {

      },
      handleDateChange(val) {
        this.formData.ad_at = val
      }
    }
  }
</script>
